<template>
  <view class="">
    <up-popup :show.sync="show" :round="16" mode="center">
      <view class="upload">
        <view class="upload-title">{{title}}</view>
        <view class="info-img">
          <up-icon name="close-circle-fill" size="28rpx" color="#333333" class="close-icon" @click="onclearImg"
            v-show="src"></up-icon>
          <image :src="src" mode="aspectFit" @click.stop="onAmplifyImg" v-show="src"></image>
          <view class="img-nav" @click="uploadImg" v-show="!src">
            <image :src="defaultUrl" mode=""></image>
          </view>
        </view>

        <view class="upload-btn">
          <button class="close" @click="close">取消</button>
          <button class="determine" @click="onConfirm">确定</button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script>
  import {
    imageUpdate,
    images
  } from './api.js'
  export default {
    props: ["show", "title", "src", "type"],
    data() {
      return {
        defaultUrl: "/static/my/icon/addIcon.png"
      }
    },
    methods: {
      close() {
        this.$emit('uploadClose', false)
      },
      async onConfirm() {
        if (!this.src) {
          uni.showToast({
            title: `请先${this.title}`,
            icon: 'none'
          })
          return
        }
        let res = {}
        if (this.type == 2) {
          res = await imageUpdate({
            startup_image: this.src,
          })
        } else if (this.type == 3) {
          res = await imageUpdate({
            banner_image: this.src,
          })
        }
        if (res && res.code === 1) {
          uni.showToast({
            title: '保存成功',
            icon: 'none'
          })
          await this.imagesApi()
          this.$emit('uploadClose', false, 1)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      },
      async imagesApi() {
        const res = await images()
        if (res && res.code == 1) {
          uni.setStorageSync("atlas", res.data)
        }
      },
      //删除图片
      onclearImg() {
        this.$emit('uploadDetail')
      },
      //全屏查看
      onAmplifyImg(url, type) {
        uni.navigateTo({
          url: `/pages/index/fullScreenPreview/FullScreenPreview?type=image&src=${this.src}`
        })
      },

      //  上传头像
      uploadFilePromise(url) {
        const that_ = this
        const token = uni.getStorageSync('userInfo').token
        uni.showToast({
          title: '上传中',
          icon: 'loading'
        })
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `https://ttj.geiqiutiyu.com/api/common/upload`, //测试地址
            // url: 'https://localhost:8080/common/upload', //测试环境
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            header: {
              token: token
            },
            success: (res) => {
              const data = JSON.parse(res.data)
              if (data && data.code === 1) {
                resolve(data.data)
                this.$emit('uploadResolve', data.data.fullurl)
              } else {
                uni.showToast({
                  title: data.msg,
                  icon: "none"
                })
              }
            },
            fail(err) {
              uni.showToast({
                title: err.errMsg,
                icon: 'none'
              })
            }
          });
        })
      },
      //选取图片
      uploadImg() {
        const that_ = this
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          success: function(res) {
            that_.uploadFilePromise(res.tempFilePaths[0])
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .upload {
    width: 670rpx;
    height: 604rpx;
    opacity: 1;
    border-radius: 16rpx;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20rpx 30rpx;

    .upload-title {
      font-size: 34rpx;
      font-weight: 600;
      letter-spacing: 0rpx;
      line-height: 52rpx;
      color: rgba(49, 49, 49, 1);
      text-align: center;
      vertical-align: top;

    }

    .upload-main {
      width: 100%;
      margin-top: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      /deep/ .u-avatar--square {
        width: 288rpx !important;
        height: 288rpx !important;
      }

      /deep/ .u-avatar__image--square {
        width: 288rpx !important;
        height: 288rpx !important;
      }

    }

    .info-img {

      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      margin-top: 48rpx;
      position: relative;
      width: 288rpx;

      .close-icon {
        position: absolute;
        right: -12rpx;
        top: -12rpx;
        z-index: 1;
      }

      .img-nav {
        width: 288rpx;
        height: 288rpx;
        border-radius: 8rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        border: 2rpx solid #EBEBEB;
        display: flex;
        align-items: center;
        justify-content: center;


      }

      image {
        height: 288rpx;
        width: 288rpx;
        border-radius: 8rpx;
        border: 2rpx solid #EBEBEB;
        box-sizing: border-box;
      }

      // ::v-deep .u-upload__wrap__preview__image {
      //   height: 288rpx !important;
      //   width: 288rpx !important;
      //   box-sizing: border-box;
      //   border: 2rpx solid #EBEBEB;
      // }

      // ::v-deep .u-upload__wrap__preview {
      //   margin: 0;
      // }

    }

    .upload-btn {
      display: flex;
      margin-top: 64rpx;
      justify-content: space-between;

      .close {
        width: 295rpx;
        height: 80rpx;
        border-radius: 12rpx;
        background: #F5F5F5;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 80rpx;
        color: #313131;
        text-align: center;
      }

      .determine {
        width: 295rpx;
        height: 80rpx;
        border-radius: 12rpx;
        background: #A4682F;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 80rpx;
        color: #fff;
        text-align: center;

      }
    }
  }
</style>